<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    start: {
      type: Number,
      default: null
    },
    end: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      chart: null,
      s:0,
      e:100
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },

  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
    this.$refs.Chart && this.$refs.Chart.clear();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      this.dataZoom(this.chartData);
      console.log("这里传参",this.chartData)
    },
    dataZoom({ dataX, dataY, dataZ } = {}) {
      let that = this;
      this.chart.on("dataZoom", function (params) {
        let startValue = 0;
        let endValue = 0;
        let end = 0,start = 0;
        let lenghts = dataX.length;
        let xdata = [];
        dataX.forEach((item, index) => {
          lenghts = index;
        });

        if (params.batch) {
          startValue = params.batch[0].startValue;
          endValue = params.batch[0].endValue;
        } else {
          start = params.start;
          end = params.end;
          startValue = Math.round(start * 0.01 * lenghts);
          endValue = Math.round(end * 0.01 * lenghts);
        }
        that.$emit('receive',startValue,endValue);
        console.log("最小值", startValue + " 最大值", endValue);
      });
    },
    setOptions({ dataX, dataY, dataZ } = {}) {
      let xdata = [];
      dataX.forEach((item, index) => {
        xdata.push(index);
      });
      if(this.start && this.end){
        this.s = this.start/xdata.length*100;
        this.e = this.end/xdata.length*100;
      }
      this.chart.setOption({
        toolbox: {
          feature: {
            dataZoom: {
              show:true,
              yAxisIndex: 'none',
              title:{zoom:'区域选择',back:''},
              icon:{
                back: 'image://images/null.png',
              }
            },
            myTool1: {
              show: true,
              title: '重新选择',
              icon:'path://M971.64 699.44l-59.87-117.08a25 25 0 0 0-33.64-10.88L761 631.34a25 25 0 0 0 22.76 44.52l61.72-31.55c-63.77 141.46-204.11 233.6-362.61 233.6-174.55 0-327.09-111.74-379.57-278a25 25 0 1 0-47.68 15A448.77 448.77 0 0 0 215.6 839.44c77.71 57.88 170.15 88.47 267.31 88.47s189.59-30.59 267.3-88.47a449.14 449.14 0 0 0 144-181.68l33 64.45a25 25 0 0 0 44.52-22.77zM93.06 461.29a25 25 0 0 0 11.36-2.75L222.86 398a25 25 0 0 0-22.77-44.51L137 385.75c64.39-143.61 206.66-237.21 367.38-237.21C681 148.54 835.42 261.65 888.55 430a25 25 0 1 0 47.68-15 453.55 453.55 0 0 0-161.69-227c-78.55-58.5-172-89.43-270.21-89.43S312.67 129.47 234.12 188A454 454 0 0 0 88.35 372.19l-33.61-65.73a25 25 0 1 0-44.52 22.76l60.56 118.44a25 25 0 0 0 22.28 13.63z',
              onclick:()=>{
                this.s=0;
                this.e=100;
                let option =  this.chart.getOption();
                option.dataZoom[0].start =0;
                option.dataZoom[0].end =100;
                this.chart.setOption(option)
                this.$emit('receive',0,xdata.length);
              }
            },
            myRestore: {
              show: true,
              title:'还原',
              icon:'path://M594.8 266.4H226.6l73.5-73.5-35.4-35.4-134.3 134.4 134.4 134.4 35.4-35.4-74.5-74.5h369c33.7 0.1 66.3 6.8 96.9 19.9 29.7 12.6 56.3 30.7 79.2 53.6 22.9 23 40.8 49.7 53.4 79.4 13 30.7 19.5 63.4 19.5 97.1 0 33.7-6.6 66.3-19.5 97.1-12.5 29.7-30.5 56.4-53.4 79.4-22.9 23-49.5 41-79.2 53.6-30.7 13.1-63.3 19.8-96.9 19.9H134.2v50h460.6c165.1-0.7 298.8-134.7 298.8-300s-133.7-299.3-298.8-300z',
              onclick:()=>{
                this.$emit('chartReset');
                this.$nextTick(() => {
                  this.s = this.start/xdata.length*100;
                  this.e = this.end/xdata.length*100;
                  let option =  this.chart.getOption();
                  option.dataZoom[0].start =this.s;
                  option.dataZoom[0].end =this.e;
                  this.chart.setOption(option)
                })
              }
            },
          },
        },
        dataZoom: [
          {
            type: "slider",
            id: "sliderX",
            show: true,
            //  zoomLook:false,
            start: this.s,
            realtime: false, //拖动滚动条时是否动态的更新图表数据
            end: this.e,
            showDetail: true, //即拖拽时候是否显示详细数值信息 默认true
            brushSelect: false,
          },
          {
            type: "inside",
            end: 100,
            start: 0,
            zoomOnMouseWheel:false
          },
        ],

        xAxis: {
          data: xdata,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 50,
          top: 30,
          containLabel: true,
          roam: false,
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },

        legend: {
          data: ["X", "Y", "Z"],
        },
        series: [
          {
            name: "X",
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2,
                },
              },
            },
            smooth: true,
            type: "line",
            data: dataX,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: "Y",
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: dataY,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
          {
            name: "Z",
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "red",
                lineStyle: {
                  color: "red",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: dataZ,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
        ],
      });
    },
  },
};
</script>
